<template>
  <div>
    <div>
      <div style="display: flex;justify-content: space-between;margin-top: 10px">
        <div>
          <el-input size="mini" style="width: 300px;margin-right: 10px"
                    prefix-icon="el-icon-search"
                    v-model="uname"
                    @keydown.enter.native="initOrderList"
                    clearable
                    @clear="initOrderList"
                    placeholder="请输入顾客名称进行搜索...">
          </el-input>
          <el-button  size="mini"
                      type="primary" icon="el-icon-search" @click="initOrderList">搜索
          </el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="ol"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="订单编号"
            fixed
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="gid"
            label="商品编号"
            align="left"
            width="80">
        </el-table-column>
        <el-table-column
            prop="uname"
            label="顾客姓名"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="uaddress"
            label="顾客地址"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="uphoneNum"
            label="联系电话"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="ocreationDate"
            label="下单时间"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="ostatus"
            label="订单备注"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            label="订单状态"
            align="left"
            width="90">
          <template scope="scope">
            <el-tag type="success" v-if="scope.row.oisFinished==1">交易成功</el-tag>
            <el-tag type="danger" v-else-if="scope.row.oisFinished==2">交易失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="160">
          <template slot-scope="scope">
            <el-button @click="checkOrder(scope.row)" style="padding: 3px" size="mini" icon="el-icon-search">明细</el-button>
            <el-button @click="deleteOrder(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout='sizes, prev, pager, next, jumper, ->, total'
            :page-size="size"
            :page-sizes="[5,10,20,30,40]"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="购买详情" :visible.sync="dialogTableVisible">
      <el-table :data="good">
        <el-table-column prop="id" label="购买商品编号" width="120"></el-table-column>
        <el-table-column prop="gname" label="购买商品名称" width="120"></el-table-column>
        <el-table-column prop="gdesc" label="商品描述" width="180"></el-table-column>
        <el-table-column prop="gsort1" label="一级分类"></el-table-column>
        <el-table-column prop="gsort2" label="二级分类"></el-table-column>
        <el-table-column label="订单价格">
          <template scope="scope">
            <el-tag>{{scope.row.gprice}}元</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data(){
    return {
      dialogTableVisible:false,
      title:'',
      loading:false,
      ol:[],
      total:0,
      currentPage:1,
      size:5,
      nameZh:"",
      uname:"",
      uid:null,
      good:[]
      // good: {
      //   id: null,
      //   gname: "",
      //   gprice: "",
      //   gcount: "",
      //   gdesc: "",
      //   gsort1: "",
      //   gsort2: "",
      //   gimgUrl: ""
      // }
    }
  },
  mounted() {
    this.initOrderList();
  },
  methods: {
    checkOrder(data){
      this.title = '订单购买详情';
      this.dialogTableVisible = true;
      this.good=[];
      this.getRequest('/good/onsell/'+data.id).then(resp=>{
        //把返回的商品对象push进表格数组，防止类型报错
        this.good.push(resp);
      })
    },
    deleteOrder(data){
      this.$confirm('是否删除订单编号为【'+data.id+'】的历史订单记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/order/history/'+data.id).then(resp=>{
          if (resp){
            this.initOrderList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消该操作'
        });
      });
    },
    sizeChange(size){
      this.size = size;
      this.initOrderList();
    },
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initOrderList();
    },
    initOrderList(){
      this.loading = true;
      this.nameZh = JSON.parse(window.sessionStorage.getItem('user'))["roles"][0]["nameZh"];
      this.uid = JSON.parse(window.sessionStorage.getItem('user'))["id"];
      // console.log(this.uname2);
      let url = '';
      if (this.nameZh == '买家'){
        url = '/order/history/customer?currentPage='+this.currentPage+'&size='+this.size+'&uId='+this.uid;
      }else {
        url = '/order/history/?currentPage='+this.currentPage+'&size='+this.size+'&uName='+this.uname;
      }
      // console.log(url);
      this.getRequest(url).then(resp=>{
        this.loading = false;
        if (resp){
          this.ol = resp.data;
          this.total = resp.total;
        }
      })
    },
  }
}
</script>

<style scoped>

</style>